<script setup lang="ts">
import { ref } from "vue";
import { useRole } from "./utils/hook";
import { PureTableBar } from "@/components/RePureTableBar";
import { useRenderIcon } from "@/components/ReIcon/src/hooks";

import ScriptInfo from "./scriptInfo.vue"

import Eye from "~icons/ri/Eye-line";

defineOptions({
  name: "scriptResources"
});

const scriptInfoRef = ref();

const {
  cateLoading,
  catalogueList,
  changeCateId,

  form,
  loading,
  columns,
  dataList,
  pagination,
  deviceDetection,

  onSearch,
  handleSizeChange,
  handleCurrentChange,
  lookScript
} = useRole(scriptInfoRef);
</script>

<template>
  <div :class="['flex', 'justify-between', deviceDetection() && 'flex-wrap']">
    <div :class="['mr-2', deviceDetection() ? 'w-full' : 'min-w-[200px]']">
      <div
        class="h-full bg-bg_color overflow-hidden relative"
        :style="{ minHeight: `calc(100vh - 141px)` }"
      >
        <div class="flex items-center h-[50px] cell">
          <h6>目录</h6>
        </div>
        <el-divider style="margin: 0;" />

        <el-scrollbar height="calc(90vh - 88px)" v-loading="cateLoading">
          <div class="flex items-center h-[50px] cell-item" :class="{ active : form.id == item.id }" v-for="(item, index) in catalogueList" :key="index" @click="changeCateId(item)">
            <p>{{ item.name }}</p>
          </div>
        </el-scrollbar>
      </div>
    </div>

    <div :class="[deviceDetection() ? ['w-full', 'mt-2'] : 'w-[calc(100%-200px)]']">
      <PureTableBar
        title=""
        :columns="columns"
        @refresh="onSearch"
        class="mt-[0]"
      >
        <template v-slot="{ size, dynamicColumns }">
          <pure-table
            align-whole="center"
            showOverflowTooltip
            table-layout="auto"
            :loading="loading"
            :size="size"
            adaptive
            :adaptiveConfig="{ offsetBottom: 108 }"
            :data="dataList"
            :columns="dynamicColumns"
            :pagination="{ ...pagination, size }"
            :header-cell-style="{
              background: 'var(--el-fill-color-light)',
              color: 'var(--el-text-color-primary)'
            }"
            @page-size-change="handleSizeChange"
            @page-current-change="handleCurrentChange"
          >
            <template #look="{ row }">
              <el-button
                class="reset-margin"
                link
                type="primary"
                :size="size"
                :icon="useRenderIcon(Eye)"
                @click="lookScript(row)"
              >
            </el-button>
            </template>
          </pure-table>
        </template>
      </PureTableBar>

      <!-- 查看话术 -->
      <ScriptInfo ref="scriptInfoRef"></ScriptInfo>
    </div>
  </div>
</template>

<style lang="scss" scoped>
:deep(.el-dropdown-menu__item i) {
  margin: 0;
}

:deep(.el-button:focus-visible) {
  outline: none;
}

.main-content {
  margin: 12px 12px 0 !important;
}

.cell, .cell-item {
  padding: 0 15px;

  h6 {
    flex: 1;
    font-size: 14px;
    color: #6e6e6e;
  }

  p {
    flex: 1;
    font-size: 13px;
    color: #919191;
    font-weight: bold;
  }
}

.cell-item {
  cursor: pointer;

  &.active {
    background-color: #f9fdfd;

    p {
      color: var(--pure-theme-menu-active-before);
    }
  }
}

.search-form {
  :deep(.el-form-item) {
    margin-bottom: 12px;
  }
}
</style>
